---
title: "Components"
description: "Self contained building blocks of your app"
pagination_prev: search
---

import { LargeCardList } from "@site/src/QuickstartsList.tsx";

<span className="convex-hero">
  Convex Components package up code and data in a sandbox that allows you to
  confidently and quickly add new features to your backend.
</span>

Convex Components are like mini self-contained Convex backends, and installing
them is always safe. They can't read your app's tables or call your app's
functions unless you pass them in explicitly.

You can read about the full vision in
[Convex: The Software-Defined Database](https://stack.convex.dev/the-software-defined-database#introducing-convex-components).

Components can be installed from NPM or from a local folder. Once installed,
they have their own database tables and isolated function execution environment.
Check out the full directory of components on the
[Convex website](https://convex.dev/components).

<LargeCardList
  items={[
    {
      title: "Understanding components",
      description:
        "Explore the concepts behind and build a mental model for how components work.",
      href: "/components/understanding",
    },
    {
      title: "Using components",
      description:
        "Learn about useful components and how to use them in your application.",
      href: "/components/using",
    },
    {
      title: "Authoring components",
      description: "Learn how to write and publish a component.",
      href: "/components/authoring",
    },
    {
      title: "Components Directory",
      description: "List of all components.",
      href: "https://convex.dev/components",
    },
  ]}
/>
